<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>CSS3 Demo</title>
    <link rel="stylesheet" href="css/style.less">
</head>
<body>
    <h2> 请在最新版本chrome浏览器下运行查看效果 </h2>
    <p class="columns-3">
        以下是一些CSS3的样式测试demo，主要通过less书写和管理完成的。包括边框扩展、背景扩展、2D/3D转换、属性过渡、自定义动画等等。
        部分css样式定义属于webkit专有的，并没有被收录到W3C中，但是也是应用比较广泛的。
    </p>

    <div class="panel">
        <h2>按钮样例-边框扩展</h2>
        <ul>
            <li>
                <a href="javascript:void(0);" class="button">基本按钮</a>
            </li>
            <li>
                <a href="javascript:void(0);" class="button round">圆角按钮</a>
            </li>
            <li class="round">
                <a href="javascript:void(0);" class="button big">大按钮</a>
            </li>
            <li class="round">
                <a href="javascript:void(0);" class="button small">小按钮</a>
            </li>
            <li class="rounded">
                <a href="javascript:void(0);" class="button big">大圆角按钮</a>
            </li>
            <li>
                <label class="button small">(椭)圆</label>
                <span class="circle bd-img"></span>
            </li>
            <li>
                <a href="javascript:void(0);" class="button big shadow">阴影按钮</a>
            </li>
            <li>
                <label class="button small">倒影</label>
                <img src="img/lss.jpg" alt="刘诗诗" class="reflect">
            </li>
        </ul>
    </div>  

    <div class="panel">
        <h2>背景扩展</h2>
        <ul>
            <li class="round">
                <a href="javascript:void(0);" class="button big skeuomorph">拟物化按钮</a>
            </li>
            <li class="rainbow">
                <a href="javascript:void(0);" class="button big">七彩背景</a>
            </li>
            <li class="rainbow left no-gradient">
                <a href="javascript:void(0);" class="button big">七彩(无渐变)</a>
            </li>
            <li class="bg-repeat">
                <a href="javascript:void(0);" class="button big">重复背景</a>
            </li>
            <li>
                <label class="button small">中心扩散</label>
                <span class="circle rainbow center">
                </span>
            </li>
            <li>
                <label class="button small">五星红旗</label>
                <div class="red-hat"></div>
            </li>
            <li>
                <label class="button small">阴阳</label>
                <span class="circle yinyang-1">
                </span>
            </li>
            <li>
                <label class="button small">阴阳</label>
                <span class="circle yinyang-2">
                </span>
            </li>
            <li>
                <label class="button small">阴阳</label>
                <span class="circle yinyang">
                </span>
            </li>
        </ul>
    </div> 

    <div class="panel transition">
        <h2>2D/3D变换 和 过渡</h2>
        <p>hover触发</p>
        <ul>
            <li>
                <a href="javascript:void(0);" class="button big to-color">颜色变换</a>
            </li>
            <li>
                <a href="javascript:void(0);" class="button big to-left">位置变换</a>
            </li>
            <li>
                <a href="javascript:void(0);" class="button big round to-rotate">旋转</a>
            </li>
            <li class="round">
                <a href="javascript:void(0);" class="button to-big">放大</a>
            </li>
            <li>
                <label class="button small">菜单效果</label>
                <a href="javascript:void(0);" class="to-menu">
                    <span></span>
                    <span></span>
                    <span></span>
                </a>
            </li>
            <li class="round">
                <label class="button small">翻页</label>
                <a href="javascript:void(0);" class="to-flip">
                    <img src="img/lss.jpg" alt="刘诗诗">
                </a>
            </li>
        </ul>
    </div>  
    
    <div class="panel">
        <h2>动画</h2>
        <ul>
            <li>
                <label class="button small">进度条</label>
                <div class="process-holder">
                    <span class="process infinite"></span>
                </div>
            </li>
            <li>
                <label class="button small">呼吸</label>
                <span class="circle breath infinite">
                </span>
            </li>
            <li>
                <label class="button small">旋转阴阳</label>
                <span class="circle yinyang rotate infinite">
                </span>
            </li>
            <li>
                <label class="button small">旋转+呼吸</label>
                <span class="circle breath infinite">
                    <span class="circle yinyang rotate infinite">
                    </span>
                </span>
            </li>
            <li>
                <label class="button small">图片轮播</label>
                <div class="slide-holder">
                    <ul class="slide infinite">
                        <li><img src="http://2.su.bdimg.com/skin_plus/272.jpg"></li>
                        <li><img src="http://2.su.bdimg.com/skin_plus/273.jpg"></li>
                        <li><img src="http://2.su.bdimg.com/skin_plus/274.jpg"></li>
                        <li><img src="http://2.su.bdimg.com/skin_plus/275.jpg"></li>
                        <li><img src="http://2.su.bdimg.com/skin_plus/276.jpg"></li>
                    </ul>
                </div>
            </li>
            <li>
                <label class="button small">Loading</label>
                <div class="loading infinite">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </li>
        </ul>
    </div>  
    
<div id="disqus_thread" class="panel"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES * * */
    var disqus_shortname = 'webfuturecn';
    
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
</body>
</html>